<template>
	<view class="article-wrap">
		<view class="article-scroll-group" @click="gotoRouter('/pages-hospital/articleInfo/articleInfo?id='+data.id)">
			<view class="article-scroll-group-left"><image mode="aspectFill" :src="data.banner" @error="imageError" ></image></view>
			<view class="article-scroll-group-right">
				<view class="article-right-title">{{ data.title }}</view>

				<view class="article-right-bottom">
					<view class="article-right-num">浏览量&nbsp;&nbsp;{{ data.browseNum }}</view>
					<view class="article-right-btn" v-if="type==1">
						<view class="article-right-delete" @click.stop="clickOne">
							删除
						</view>
						<view class="article-right-edit" @click.stop="clickTwo">
							编辑
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: String | Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		clickOne(){
			this.$emit("clickOne")
		},
		clickTwo(){
			this.$emit("clickTwo")
		},
		imageError(){
			this.data.banner = "http://k8s.vendingtech.vip/images/banner.png"
		}
	}
};
</script>

<style lang="less">
.article-scroll-group {
	display: flex;
	margin-bottom: 10rpx;
	.article-scroll-group-left {
		margin-right: 20rpx;

		> image {
			width: 240rpx;
			height: 140rpx;
		}
	}

	.article-scroll-group-right {
		.article-right-title {
			width: 366rpx;
			height: 69rpx;
			overflow-wrap: break-all;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Medium;
			overflow: hidden;
			box-sizing: border-box;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.article-right-bottom {
			display: flex;
			// justify-content: center;
			align-items: center;
			
			.article-right-num {
				width: 122rpx;
				display: block;
				overflow-wrap: break-word;
				color: rgba(153, 153, 153, 1);
				font-size: 20rpx;
				font-family: PingFangSC-Regular;
				white-space: nowrap;
				line-height: 28rpx;
				text-align: left;
				align-self: flex-start;
				margin-top: 35rpx;
			}
			
			.article-right-btn{
				margin-top: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.article-right-delete{
					margin-right: 20rpx;
					width: 100rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1rpx solid #999999;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999999;
				}
				.article-right-edit{
					width: 100rpx;
					height: 40rpx;
					background: #F9F7FF;
					border-radius: 20rpx;
					border: 1rpx solid #6E99C7;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #6E99C7;
				}
			}
			
		}
	}
}
</style>
